<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
		<title></title>
		<script type="text/javascript" src="index.js"></script>
	</head>
	<style>
		body {
			margin: 0 auto;
			text-align: center;
		}
		
		figure {
			margin: 0;
			padding: 0;
		}
		
		article {
			position: absolute;
			height: 160px;
			top: 40%;
			left: 50%;
			margin-top: -85px;
			margin-left: -105px;
		}
		
		div {
			margin: 2px;
		}
		
		#line1 {}
		
		#line2 {}
		
		#line2 div {
			width: 5px;
			height: 5px;
			display: inline-block;
			background-color: black;
		}
		
		#line1 div {
			width: 5px;
			height: 5px;
			display: inline-block;
			background-color: black;
		}
		
		#line3 div {
			width: 5px;
			height: 5px;
			display: inline-block;
			background-color: black;
		}
		
		#line4 div {
			width: 5px;
			height: 5px;
			display: inline-block;
			background-color: black;
		}
		
		#line5 div {
			width: 5px;
			height: 5px;
			display: inline-block;
			background-color: black;
		}
		
		#line6 div {
			width: 5px;
			height: 5px;
			display: inline-block;
			background-color: black;
		}
		
		#line7 div {
			width: 5px;
			height: 5px;
			display: inline-block;
			background-color: black;
		}
		
		#line8 div {
			width: 5px;
			height: 5px;
			display: inline-block;
			background-color: black;
		}
		
		div {
			width: 5px;
			height: 5px;
			display: inline-block;
			background-color: black;
		}
		
		button {
			width: 120px;
		}
		
		p a {
			/*padding: 20px;*/
			color: cornflowerblue;
			/*text-decoration: none;*/
		}
		aside{
			margin-top: 50px;
		}
	</style>

	<body>
		<article>
			<figure id="line1">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</figure>
			<figure id="line2">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</figure>
			<figure id="line3">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</figure>
			<figure id="line4">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</figure>
			<figure id="line5">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</figure>
			<figure id="line6">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</figure>
			<figure id="line7">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</figure>
			<figure id="line8">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</figure>
			<figure id="line9">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</figure>
			<figure id="line10">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</figure>
			<aside>
				<p>
					<a target="_blank" href="https://github.com/Wscats">Github</a>
				</p>
				<p>
					<a target="_blank" href="http://blog.csdn.net/qq_27080247">Blog | 博客</a>
				</p>
				<p>
					<a target="_blank" href="https://gold.xitu.io/user/584c7f44ac502e0069275cd7">Gold.Xitu | 掘金</a>
				</p>
				<p>
					<a target="_blank" href="https://segmentfault.com/u/wscats">Segmentfault | 思否</a>
				</p>
				<!-- <p>
					<a target="_blank" href="https://www.talkingcoder.com/user/6265061239845749490">Wscats's Talkingcoder</a>
				</p> -->
				<p>
					<a target="_blank" href="https://wscats.github.io/blog/cv.html">About Me | 关于我</a>
				</p>
			</aside>
		</article>
	</body>
	<script>
		digit[0][0];
		var z = 0;
		function changeNumber() {
			for(var j = 0; j < digit[z].length; j++) {
				for(var i = 0; i < digit[z][j].length; i++) {
					var line = document.getElementById('line' + (j + 1));
					var line_divs = line.getElementsByTagName('div');
					line_divs[i].style.backgroundColor = (digit[z][j][i] == 0 ? "white" : "black");
				}
			}
			z++;
			if(z > 3) {
				clearInterval(changeNumberInterval);
			}
		}
		var changeNumberInterval = setInterval(changeNumber, 1000);
	</script>

</html>
